import React, { Component, useState, useEffect } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Modal, Row, Col, InputNumber,
} from 'antd';
import { FormComponentProps } from '@ant-design/compatible/es/form';

interface LongLinkSettingPorps extends FormComponentProps {
  dispatch: Dispatch;
  showLongLink: boolean;
  longConfig: any;
}

const LongLinkSettingElem: React.FC<LongLinkSettingPorps> = (props) => {
  const {
    showLongLink,
    dispatch,
    longConfig,
    form: { getFieldDecorator },
  } = props;

  const handleSubmit = () => {
    const { form: { validateFields } } = props;
    validateFields((errors, values) => {
      if (!errors) {
        if (!errors) {
          const params = {
            clientId: longConfig.clientId,
            ...values,
          };
          dispatch({
            type: 'cabinetManagementList/longLink',
            payload: params,
          });
        }
      }
    });
  };

  return (
    <Modal
      title="长链配置"
      visible={showLongLink}
      okText="保存"
      destroyOnClose
      onOk={handleSubmit}
      onCancel={() => dispatch({
        type: 'cabinetManagementList/fetchLongConfig',
        payload: { change: false },
      })}
    >
      <Form hideRequiredMark className="tableListForm">
        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
          <Col md={16} sm={24} style={{ display: 'flex' }}>
            <Form.Item label="超时时间" colon={false} style={{ flex: 1 }}>
              {getFieldDecorator('timeout', {
                initialValue: longConfig.timeout,
                rules: [{ required: true, message: '请输入超时时间' }],
              })(
                <InputNumber
                  step={1}
                  min={0}
                  precision={0}
                  style={{ width: '100%' }}
                />,
              )}
            </Form.Item>
            <span className="marginL16" style={{ lineHeight: '32px' }}>秒</span>
          </Col>
          <Col md={16} sm={24} style={{ display: 'flex' }}>
            <Form.Item label="心跳时间" colon={false} style={{ flex: 1 }}>
              {getFieldDecorator('keepalive', {
                initialValue: longConfig.keepalive,
                rules: [{ required: true, message: '请输入心跳时间' }],
              })(
                <InputNumber
                  step={1}
                  min={0}
                  precision={0}
                  style={{ width: '100%' }}
                />,
              )}
            </Form.Item>
            <span className="marginL16" style={{ lineHeight: '32px' }}>秒</span>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default connect(({
  cabinetManagementList: { dataInfo, showLongLink, longConfig },
}: any) => ({ dataInfo, showLongLink, longConfig }))(
  Form.create<LongLinkSettingPorps>()(LongLinkSettingElem),
);
